<template>
  <div>
    <div class="roomInformation">
      <!-- 搜索 -->
      <el-card class="box-card">
        <div class="clearfix">
          <div class="container">
            <el-form size="small" label-width="100px" style="display: flex;">
              <el-form-item label="按键信息：" class="width50">
                <el-input
                  v-model="pagesizes.keyInfo"
                  placeholder="请输入按键信息"
                  class="selWidth"
                  size="small"
                  clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item label="短信模板id：" class="width50">
                <el-input
                  v-model="pagesizes.smsTemplateId"
                  placeholder="请输入短信模板id"
                  class="selWidth"
                  size="small"
                  clearable
                >
                </el-input>
                <el-button
                  class="mr10"
                  size="small"
                  type="primary"
                  @click="search()"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
      <!-- 列表 -->
      <el-table :data="tableList" style="width: 100%">
        <el-table-column fixed prop="keyInfo" label="按键信息">
        </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <el-table-column prop="remark" label="备注">
          <template v-if="tableList.remark"></template>
        </el-table-column>
        <el-table-column prop="smsContent" label="短信内容"> </el-table-column>
        <el-table-column prop="smsTemplateId" label="短信模板id">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="mr10"
              @click="getDetail(scope.row.id)"
              >详情</el-button
            >
            <el-button
              type="text"
              size="small"
              class="mr10"
              @click="del(scope.row.id)"
              >删除</el-button
            >
            <div>
              <el-dialog
                center
                width="30%"
                title="详情信息"
                custom-class="el-dialog-s"
                :modal-append-to-body="false"
                :visible.sync="dialogTableVisible"
              >
                <div class="detailMsg">
                  <div>
                    按键信息：<span style="margin-left: 310px;">{{
                      detailmsg.keyInfo
                    }}</span>
                  </div>
                  <div>
                    手机号：<span style="margin-left: 320px;">{{
                      detailmsg.phone
                    }}</span>
                  </div>
                  <div>
                    短信模板id：<span style="margin-left: 300px;">{{
                      detailmsg.smsTemplateId
                    }}</span>
                  </div>
                  <div>
                    是否已发送短信：<span style="margin-left: 270px;">
                      <el-switch
                        disabled
                        v-model="value"
                        active-color="#13ce66"
                        inactive-color="#eee"
                        :active-value="detailmsg.isSms == false"
                        :inactive-value="detailmsg.isSms == true"
                      >
                      </el-switch
                    ></span>
                  </div>
                </div>
                <div
                  style="width: 100%; height: 100px; font-size: 14px; font-weight: 700; margin-top: 20px;"
                >
                  短信内容：<span
                    style="width: 70%; height: 100px; padding: 10px; font-weight: 400;"
                    >{{ detailmsg.smsContent }}</span
                  >
                </div>
              </el-dialog>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="getList"
          :current-page.sync="pagesizes.page"
          :page-sizes="[20, 40, 60, 80]"
          :page-size="pagesizes.limit"
          layout="total,sizes,prev, pager, next,jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { qimoListApi, detailListApi, delListApi } from "@/api/qimoInFormation";
export default {
  data() {
    return {
      //开关
      value: true,
      dialogTableVisible: false,
      //详情信息
      detailmsg: [],
      // 列表数据
      tableList: [],
      pagesizes: {
        limit: 20,
        page: 1,
        keyInfo: "", //按键信息
        smsTemplateId: "" //短信模板id
      },
      // 总数据量
      total: 0,
      // 总页数
      totalPage: 0
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    //搜索
    search() {
      this.getList();
    },
    //获取详情信息
    getDetail(id) {
      this.dialogTableVisible = true;
      detailListApi({ id }).then(res => {
        this.detailmsg = res;
        console.log(res, "desfrgthyjh");
      });
    },
    //关闭对话框
    handleClose(done) {
      done();
    },
    //获取信息列表
    getList() {
      qimoListApi(this.pagesizes).then(res => {
        this.tableList = res.list;
        this.total = res.total;
        this.totalPage = res.totalPage;
        this.tableData = res.list;
      });
    },

    // 搜索
    async seachList() {
      const ressl = await roomListApi({ fxName: this.roominfo });
      this.tableData = ressl.list;
      this.total = this.tableData.length;
    },
    // //添加信息
    // addgInfo() {
    //   this.$router.push('/amszs/qimoInformation/qimoAddMsg')
    // },
    // 修改
    edit() {},
    // 删除
    async del(id) {
      try {
        await this.$confirm("是否删除该条信息", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        await delListApi({ id: id });
        this.$message.success("删除成功");
        this.getList();
      } catch {}
    },
    handleSizeChange(val) {
      this.pagesizes.limit = val;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.roomInformation {
  padding: 20px;

  .box-card {
    margin-bottom: 20px;
  }

  .el-table__fixed-right::before {
    z-index: 0;
  }
  .detailMsg {
    margin: 0 auto;
    overflow: hidden;
    div {
      margin-top: 20px;
      font-size: 14px;
      font-weight: 700;
      overflow: hidden;

      span {
        font-size: 14px;
        font-weight: normal;
        overflow: hidden;
      }
    }
  }

  .block {
    padding: 20px;
    text-align: right;
    width: 100%;
    background-color: #ffffff;
  }
}
</style>
